<template>
	<rh-wx class="wallet-account-container">
		<view class="page-label flex-between">
			<text class="label-txt">账户激活</text>
		</view>
		<view class="form-content">
			<view class="form-item">
				<rh-input label="账户姓名" v-model="baseData.accountName" placeholder="请输入账户持有人姓名"></rh-input>
			</view>
			<view class="form-item">
				<rh-input label="银行账号" v-model="baseData.bankCard" type="number" placeholder="请输入银行账号" @blur="getBankName"></rh-input>
			</view>
			<view class="form-item" v-if="baseData.bankName">
				<view class="input-item flex-between">
					<view class="input-label">
						<text class="label-txt">开户行</text>
					</view>
					<view class="input-val flex-normal">
						<image class="bank-logo" :src="`data:image/jpg;base64,${baseData.bankLogo}`"></image>
						<text class="val-txt">{{baseData.bankName}}</text>
					</view>
				</view>
			</view>
			<view class="form-item">
				<rh-input label="银行预留手机号" v-model="baseData.accountPhone" type="number" placeholder="请输入银行预留手机号"></rh-input>
			</view>
		</view>
		<rh-submit-btn class="submit-btn" text="提交信息" :submit-action="submit"></rh-submit-btn>
	</rh-wx>
</template>

<script>
	import {isWechat} from '@/script/wx-premission.js'
	import { getBankName } from '@/api/common/index.js'
	import {getUserBankInfo, addBankCard, editBankCard} from '@/api/wallet/index.js'
	export default {
		data() {
			return {
				isWechat: isWechat(),
				baseData: {}
			}
		},
		onLoad(e) {
			let _self = this
			if(!_self.isWechat) return
			_self.showWxApp().then(boo => {
				console.log(e)
				if(e.ac == 'jh') return
				_self.queryUserBankInfo()
			})
		},
		methods: {
			getBankName(str){
				let _self = this
				_self.$set(_self.baseData, 'bankName', '')
				_self.$set(_self.baseData, 'bankLogo', '')
				if(!str) return
				let params = {
					bankCode: str
				}
				getBankName(params).then(res => {
					let {bankName, logo} = res.data
					_self.$set(_self.baseData, 'bankName', bankName)
					_self.$set(_self.baseData, 'bankLogo', logo)
				})
			},
			queryUserBankInfo(){
				let _self = this, isSuccess = false, query = {}
				getUserBankInfo().then(res => {
					_self.baseData = res.data || {}
				})
			},
			submit(val){
				let _self = this, fn = Function
				return new Promise((resolve, reject) => {
					let {id, accountName, bankCard, bankName, accountPhone} = _self.baseData, query = {}
					if(!accountName || accountName == '') {
						_self.$attention.noIcon('账户持有人姓名不能为空')
						return reject(false)
					} 
					if(!bankCard || bankCard == '') {
						_self.$attention.noIcon('银行账号不能为空')
						return reject(false)
					} 
					if(!accountPhone || accountPhone == '') {
						_self.$attention.noIcon('手机号不能为空')
						return reject(false)
					}
					if(id){
						fn = editBankCard
						query.type = 'editAccount'
					}else {
						fn = addBankCard
						query.type = 'addAccount'
					}
					fn(_self.baseData).then(res => {
						_self.$attention.noIcon('操作成功')
						setTimeout(() => {
							_self.$$router.push({name: 'walletSuccess', query})
						}, 1200)
					}).finally(() => {
						resolve(true)
					})
				})
			},
		}

	}
</script>
<style lang="scss" scoped>
  // @include fontStyle(#666, 24rpx);
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.wallet-account-container {
		background-color: #F4F8F9;
		min-height: 100vh;
		padding: 60rpx 20rpx;
		position: relative;
		.page-label{
			.label-txt{
				@include fontStyle(#3D3D3D, 28rpx);
			}
		}
		.form-content{
			padding: 0 30rpx;
			padding-bottom: 30px;
			background-color: #fff;
			border-radius: 6rpx;
			margin-top: 30rpx;
			.bank-logo{
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}
			.val-txt{
				@include fontStyle(#3D3D3D, 28rpx);
			}
			.form-item{
				padding: 30rpx 0;
				border-bottom: 1rpx dashed #D8D8D8;;
			}
		}
	}
</style>


